<template>
  <div class="box">
    <!-- 页面顶部的bar页面 -->
    <div class="boxtop">
      <van-nav-bar  :title="CarName">
      </van-nav-bar>
    </div>
    <!-- 搜索栏 -->
    <div class="searchbox">
      <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
    <!-- 折叠面板 -->
    <van-collapse v-model="activeNames" >
      <van-collapse-item :title="index"  v-for="(item,index) in  this.Yearsmodel" :key='index'>
        <!-- 循环用里面得数组 -->
        <div v-for="(item1,index1) in item" :key="index1" class="CollapseItembox" @click="clickCollapseName(item1)">
          <span class="CollapseText">{{item1.modelName}}</span>
        </div>
      </van-collapse-item>
    </van-collapse>
</div>
  </div>
</template>
<script>
import { selectname } from '@/api/comput'
import { mapState } from 'vuex'
// 通过映射里面数据CarName
export default {
  data () {
    return {
      value: '',
      Yearsmodel: {},
      activeNames: ['1']
    }
  },
  computed: {
    ...mapState(['CarName'])
  },
  created () {
    this.getAllInfo()
  },
  methods: {
    async getAllInfo () {
      console.log(this.$route.query.seriesCode)
      const { data } = await selectname({ seriesCode: this.$route.query.seriesCode })
      console.log(data.data)
      this.Yearsmodel = data.data
    },
    ClickText () {
      console.log('打印搜索栏')
    },
    clickCollapseName (val) {
      console.log(val.modelName)
      this.$store.commit('getComputename', val.modelName)
      this.$store.commit('newCarCode', val.modelCode)
      // 传新车车型
      this.$store.commit('getNewPrice', val.guidancePrice)
      console.log(this.$store.state.modelCode)
      this.$router.push('/compute')
    }
  }
}
</script>
<style lang="less" scoped>
.CollapseItembox{
  width: 375px;
  height: 45px;
  border: 1px solid  #f7f8fa;
  line-height: 45px;
.CollapseText{
  display: inline-block;
  font-style: 14px;
  color: #474748;
}
}
</style>
